<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>hangge.com</title>
    <style>
    </style>
    <script type="text/javascript">
			//用于填写发送消息的输入框
			var messageBox;
			//用于显示消息的div容器
			var messageLog;
			//WebSocket对象
			var socket;

			//页面加载完毕
			window.onload = function() {
				messageBox = document.getElementById('messageBox');
				messageLog = document.getElementById('messageLog');
				//wsAddress = document.getElementById('wsAddress');
			}

			//创建socket对象并绑定所有事件
			function connect() {
				//创建socket对象
				socket = new WebSocket(wsAddress.value);
				console.log(wsAddress.value)

				//监听所有的Web socket事件
				socket.onopen = connectionOpen;
				socket.onmessage = messageReceived;
				socket.onerror = errorOccurred;
				socket.onclose = connectionClosed;
			}

			//断开连接按钮点击
			function disconnect() {
				socket.close();
			}

			//发送消息按钮点击
			function sendMessage() {
				//获取要发送的数据
				var message = messageBox.value;

				//通过socket发送消息
				socket.send(message);

				//告诉用户刚刚发生了什么
				messageLog.innerHTML += "<br>发送：" + message;
			}

			//连接建立完毕事件响应
			function connectionOpen(e) {
				messageLog.innerHTML += "<br>--- Socket连接成功 ---";
			}

			//消息接收事件响应
			function messageReceived(e) {
				messageLog.innerHTML +=e.data;
				console.log(e.data)
			}

			//错误事件响应
			function errorOccurred(e) {
				messageLog.innerHTML += "<br>发生错误：" + e.data;
			}

			//连接关闭事件响应
			function connectionClosed(e) {
				messageLog.innerHTML += "<br>--- Socket连接关闭 ---";
			}
		</script>
</head>
<body>
<input id="wsAddress" value="ws://127.0.0.1:8080/websocket/realTimeLogs/task.log" style="width: 400px;" />
<button onclick="connect()">连接</button>
<button onclick="disconnect()">断开</button>

<br />
<textarea id="messageLog" readonly cols="200" rows="100"></textarea>
</body>
</html>